import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import {
  Select,
  TextField,
  Row,
  Col,
  Button,
  DateRangeWrapper
} from '@folio/stripes/components';
import { FormattedMessage, injectIntl } from 'react-intl';
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';
import {attendanceState} from './enum'
import css from './style.css';

class SearchForm extends React.Component {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    dictionary: PropTypes.object,
    cleanSearch:PropTypes.func,
    initialValues: PropTypes.object,
    onRef: PropTypes.func,
    getActivityNames: PropTypes.func,
    getUserNames: PropTypes.func
  }

  constructor(props) {
    super(props);
    this.state = {
      userNames: [],
      activityNames: []
    };
  }

  componentDidMount() {
    // this.props.onRef(this);
    // this.props.getActivityNames().then((result) => {
    //   if (result.success) {
    //     this.setState({
    //       activityNames: result.data
    //     });
    //   }
    // });
    // this.props.getUserNames().then((result) => {
    //   if (result.success) {
    //     this.setState({
    //       userNames: result.data
    //     });
    //   }
    // });
  }

  startDateRef = (ref) => {
    this.startDateRef = ref;
  }

  endDateRef = (ref) => {
    this.endDateRef = ref;
  }

  clearDate = () => {
    this.startDateRef.clearDate();
    this.endDateRef.clearDate();
  }

  fieldChange = () => {
    const {
      handleSubmit
    } = this.props;
    this.setState(() => {
      handleSubmit();
    });
  }

  activityNamesHtml = () => {
    const components = [];
    this.state.activityNames.forEach((item, index) => {
      components.push(<option value={item.jsonb.activityName} />);
    });
    return components;
  }

  userNamesHtml = () => {
    const components = [];
    this.state.userNames.forEach((item, index) => {
      components.push(<option value={item.username} />);
    });
    return components;
  }

  render() {
    const {
      handleSubmit,
      dictionary,
      cleanSearch,
      initialValues,
      intl,
      activityNames,
      userNames,
      getActivityNames,
      getUserNames
    } = this.props;


    const getter = (e, value) => {
      return value;
    };

    const attendanceStateOptions = ( attendanceState || []).map(g => {
      return (
        <FormattedMessage key={g.id} id={g.desc}>
          {(message) => <option value={g.id}>{message}</option>}
        </FormattedMessage>
      );
    });

    return (
      <React.Fragment>
        <form
          data-test-form-page
          id="form-search"
          onSubmit={handleSubmit}
        >
          <Row>
            <Col className={css.inputCalss}>
              <Field
                component={TextField}
                placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.property.parentName' })}
                name="partyName"
                onBlur={this.fieldChange}
               // onClearField={this.fieldChange}
                list="activityName"
              />
              <datalist id="activityName">
                <option value="" />
                {/*{*/}
                {/*  this.activityNamesHtml()*/}
                {/*}*/}
              </datalist>
            </Col>
            <Col className={css.inputCalss}>
              <Field
                component={TextField}
                placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerName' })}
                name="name"
                onBlur={this.fieldChange}
                onClearField={this.fieldChange}
               // onFocus={getUserNames}
                list="readName"
              />
              <datalist id="readName">
                <option value="" />
                {/*{*/}
                {/*  this.userNamesHtml()*/}
                {/*}*/}
              </datalist>
            </Col>
            <Col className={css.inputCalss}>
              <Field
                component={Select}
                selectClass={css.selectWidth}
                name="attendState"
                onChange={this.fieldChange}
              >
                {attendanceStateOptions}
              </Field>
            </Col>
            <Col>
              <DateRangeWrapper
                initialStartDate={initialValues.query.data.start.activityTime}
                initialEndDate={initialValues.query.data.end.activityTime}
                startValueGetter={getter}
                endValueGetter={getter}
              >
                {({
                  getStartInputProps,
                  getEndInputProps,
                  endDateExclude,
                  startDateExclude,
                }) => (
                  <Row
                    className={css.inputCalss}
                  >
                    <Col>
                      <Field
                        className={css.dateLine}
                        name="partyStartDate"

                        component={DatePerfectChoice}
                        exclude={startDateExclude}
                        dateFormat="YYYY-MM-DD"
                        onRef={this.startDateRef}
                        {...getStartInputProps()}
                      />
                    </Col>
                    <Col>-</Col>
                    <Col>
                      <Field
                        className={css.dateLine}
                        name="partyEndDate"

                        component={DatePerfectChoice}
                        exclude={endDateExclude}
                        dateFormat="YYYY-MM-DD"
                        onRef={this.endDateRef}
                        {...getEndInputProps()}
                      />
                    </Col>
                  </Row>
                )
                }
              </DateRangeWrapper>
            </Col>
            <Col className={css.inputCalss}>
              <Button type="submit">
                <FormattedMessage id="ui-party.search" />
              </Button>

            </Col>
          </Row>
        </form>
      </React.Fragment>
    );
  }
}
export default injectIntl(reduxForm({
  form: 'MessageTemplateSearchForm',
  navigationCheck: true,
  enableReinitialize: true,
})(SearchForm));
